import React from "react"
import {Button, Card, CardBody, Row, Col, Form, FormGroup, Input, Label} from "reactstrap"
import {Mail, Lock, Check} from "react-feather"
import {history} from "../../../../history"
import Checkbox from "../../../../components/@vuexy/checkbox/CheckboxesVuexy"

import loginImg from "../../../../assets/img/pages/login.png"
import "../../../../assets/scss/pages/authentication.scss"

import {connect} from 'react-redux';
import {loginUser} from '../../../../redux/actions/auth/loginActions';
import Spinner from "../../../../components/@vuexy/spinner/Full-loading-spinner"


class Login extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      email: '',
      password: '',
    }
    this.handleInputChange = this.handleInputChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleInputChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  handleSubmit(e) {
    e.preventDefault();
    this.props.loginUser(this.state.email, this.state.password);
  }

  render() {

    return (
      <Row className="m-0 justify-content-center">
        <Col
          sm="8"
          xl="7"
          lg="10"
          md="8"
          className="d-flex justify-content-center"
        >
          <Card className="bg-authentication login-card rounded-0 mb-0 w-100">
            <Row className="m-0">
              <Col
                lg="6"
                className="d-lg-block d-none text-center align-self-center px-1 py-0"
              >
                <img src={loginImg} alt="loginImg"/>
              </Col>
              <Col lg="6" md="12" className="p-0">
                <Card className="rounded-0 mb-0 p-sm-2 p-0 py-1">
                  {
                    this.props.spinner.indexOf('login-form') !== -1 &&
                    <div className="zindex-4 w-100 min-h-100"><Spinner/></div>
                  }
                  <CardBody>
                    <h4>Авторизоваться</h4>
                    <p className="mb-2">Добро пожаловать, пожалуйста, войдите в свой аккаунт.</p>
                    <Form onSubmit={this.handleSubmit} className="pt-1">
                      <FormGroup className="form-label-group position-relative has-icon-left">
                        <Input
                          type="email"
                          name="email"
                          placeholder="Email"
                          onChange={this.handleInputChange}
                          value={this.state.email}
                          required
                        />
                        <div className="form-control-position">
                          <Mail size={15}/>
                        </div>
                        <Label>Email</Label>
                      </FormGroup>
                      <FormGroup className="form-label-group position-relative has-icon-left">
                        <Input
                          type="password"
                          name="password"
                          placeholder="Password"
                          onChange={this.handleInputChange}
                          value={this.state.password}
                          required
                        />
                        <div className="form-control-position">
                          <Lock size={15}/>
                        </div>
                        <Label>Пароль</Label>
                      </FormGroup>
                      <div className="d-flex justify-content-between">
                        <Button.Ripple
                          color="primary"
                          outline
                          onClick={() => {
                            history.push("/register")
                          }}
                        >
                          Регистрация
                        </Button.Ripple>
                        <Button.Ripple color="primary" type="submit">
                          Вход
                        </Button.Ripple>
                      </div>
                    </Form>
                  </CardBody>
                </Card>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    )
  }
}

const mapStateToProps = state => {
  return {
    spinner: state.helper.spinner
  }
};

export default connect(mapStateToProps, {loginUser})(Login)

